<script setup>
import { ref, computed, onMounted } from 'vue'
import Button from '@/components/Button.vue'
import { validEmail } from '@/utils/valid'
import { contactUsApi } from '@/api'
import { useCommonStore } from '@/stores'
import { message } from 'ant-design-vue'

const gameList = computed(() => useCommonStore().gameList)
const contactRef = ref()
const contactForm = ref({
  name: '',
  email: '',
  game_id: null,
  order: '',
  message: '',
})
const rules = {
  name: [{ required: true, message: 'Please enter a first name!', trigger: 'blur' }],
  email: [{ validator: validEmail, trigger: 'blur' }],
  message: [{ required: true, message: 'Please enter your message!', trigger: 'blur' }],
  game_id: [{ required: true, message: 'Please select a game!', trigger: 'blur' }],
}
const send = () => {
  contactRef.value.validate().then(() => {
    const params = {
      ...contactForm.value,
    }
    contactUsApi(params).then(() => {
      message.success('Send Successfully!')
      contactRef.value.resetFields()
    })
  })
}
onMounted(() => {})
</script>
<template>
  <div class="bg-gray-50 pb-10">
    <div class="max-w-[1200px] flex flex-col gap-8 mx-auto pt-8 pb-10 max-[1200px]:p-3">
      <div class="flex gap-5 items-center">
        <div class="text-3xl max-[750px]:text-xl">Contact</div>
        <div class="flex-1 h-0.5 bg-gray-300"></div>
      </div>
      <div class="flex gap-20">
        <div class="flex-1 flex items-center justify-center">即时通讯</div>
        <div class="flex-1 flex flex-col gap-2 max-w-[70%] mx-auto max-[750px]:max-w-[100%]">
          <div class="mb-3 text-3xl max-[750px]:text-2xl">Contact Customer Support</div>
          <div>
            <div>
              Let us know where we can help and you'll receive a reply in no time. Please don't be
              salty
            </div>
            <div>You can also email us via support@yesgamers.com</div>
          </div>
          <div class="h-[1px] bg-gray-400"></div>
          <div>
            <a-form ref="contactRef" :model="contactForm" :rules="rules" autocomplete="off">
              <a-form-item name="name">
                <div class="flex flex-col gap-3 relative">
                  <label
                    class="text-gray-500 absolute left-[-10px] translate-x-[-100%] max-[750px]:relative max-[750px]:translate-x-0 max-[750px]:left-0"
                    >*Name</label
                  >
                  <div class="bg-gray">
                    <a-input
                      v-model:value="contactForm.name"
                      placeholder="Please enter your name"
                      :bordered="false"
                    />
                  </div>
                </div>
              </a-form-item>
              <a-form-item name="email">
                <div class="flex flex-col gap-3 relative">
                  <label
                    class="text-gray-500 absolute left-[-10px] translate-x-[-100%] max-[750px]:relative max-[750px]:translate-x-0 max-[750px]:left-0"
                    >*Email</label
                  >
                  <a-input
                    type="email"
                    v-model:value="contactForm.email"
                    placeholder="Please enter your email"
                    :bordered="false"
                  />
                </div>
              </a-form-item>
              <a-form-item name="game_id">
                <div class="flex flex-col gap-3 relative">
                  <label
                    class="text-gray-500 absolute left-[-10px] translate-x-[-100%] max-[750px]:relative max-[750px]:translate-x-0 max-[750px]:left-0"
                    >*Game</label
                  >
                  <div class="bg-gray">
                    <a-select
                      v-model:value="contactForm.game_id"
                      placeholder="Please select a game"
                      :bordered="false"
                    >
                      <a-select-option :value="game.key" v-for="game in gameList" :key="game.key">
                        {{ game.label }}
                      </a-select-option>
                    </a-select>
                  </div>
                </div>
              </a-form-item>
              <a-form-item name="order">
                <div class="flex flex-col gap-3 relative">
                  <label
                    class="text-gray-500 absolute left-[-10px] translate-x-[-100%] max-[750px]:relative max-[750px]:translate-x-0 max-[750px]:left-0"
                    >Order #</label
                  >
                  <div class="bg-gray">
                    <a-input
                      v-model:value="contactForm.order"
                      placeholder="#TDGTSR4SDT"
                      :bordered="false"
                    />
                  </div>
                </div>
              </a-form-item>
              <a-form-item name="message">
                <div class="flex flex-col gap-3 relative">
                  <label
                    class="text-gray-500 absolute left-[-10px] translate-x-[-100%] max-[750px]:relative max-[750px]:translate-x-0 max-[750px]:left-0"
                    >*Message</label
                  >
                  <div class="bg-gray">
                    <textarea
                      v-model="contactForm.message"
                      class="textarea"
                      placeholder="Please enter your message"
                    ></textarea>
                  </div>
                </div>
              </a-form-item>
            </a-form>
            <Button class="w-[20%] max-[750px]:w-full" bg="#f9a044" @click="send"> SEND </Button>
            <div class="cursor-pointer text-gray-500 mt-4 text-[12px]">
              Please make sure to read the Quick Answers on the top. There's no point asking the
              same question and receiving the same answer :)
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.contact {
  background: url('@/assets/icons/contact.png') no-repeat center center;
  background-size: cover;
}
.ant-input,
.ant-select {
  border-radius: 0 !important;
  background-color: #f5f5f5;
  border: 1px solid #ccc !important;
}
.textarea {
  width: 100%;
  height: 150px;
  border-radius: 0 !important;
  background-color: #f5f5f5;
  border: 1px solid #ccc !important;
  resize: none;
  outline: none;
  padding: 10px 12px;
}
@media (max-width: 750px) {
  .contact {
    width: 95%;
  }
}
</style>
